<template>
    <div class="inventory-page">
        <!-- 基础信息区域 -->
        <el-card class="info-card" header="基础信息">
            <el-form :model="basicInfo" label-width="120px" inline style="width: 100%;">
                <el-form-item label="盘点单号">
                    <el-input v-model="basicInfo.basicordernumber" placeholder="自动获取单据编号" disabled />
                </el-form-item>
               <el-form-item label="仓库类型">
        <el-select v-model="basicInfo.typeId" placeholder="请选择盘点类型" style="width: 160px; margin-right: 20px;">
            <option value="0">请选择</option>
            <el-option v-for="item in typeOptions":label="item.typeName" :value="item.typeId" />
        </el-select>
        </el-form-item>
                <el-form-item label="盘点开始时间">
                    <el-date-picker v-model="basicInfo.startTime" type="date" placeholder="请选择"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="盘点结束时间">
                    <el-date-picker v-model="basicInfo.endTime" type="date" placeholder="请选择"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="仓库名称">
                     <el-select v-model="basicInfo.inventiryId" placeholder="请选择仓库类型" style="width: 160px; margin-right: 20px;">
                        <option value="0">请选择</option>
                       <el-option v-for="value in GetInventoryData" :label="value.warehouseName" :value="value.inventiryId"/>
      </el-select>
                </el-form-item>
                <el-form-item label="经办人">
                    <el-input v-model="basicInfo.userName" placeholder=""  />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="basicInfo.remarks" type="textarea" placeholder="请输入" :rows="3"
                        style="width: 500px;" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="AddStorktaking()">添加货品</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 盘点明细区域 -->
        <el-card class="detail-card" header="盘点明细" style="margin-top: 20px;">
                <el-button type="primary" >入库明细</el-button>
              <el-button type="success">出库明细</el-button>
              <el-button type="info">调拨明细</el-button>
              <el-button type="warning">导出</el-button>
        </el-card>
        <!-- 入库明细 -->
         <title>入库报表信息</title>
  <el-table :data="tableDataru" style="width: 100%">
    <el-table-column type="index" label="序号" width="140" />
    <el-table-column prop="associatedOrderNumber" label="管理订单号" width="140" />
    <el-table-column prop="supplierName" label="供应商名称" width="140" />
    <el-table-column prop="supplierPhone" label="供应商联系方式" width="140" />
    <el-table-column prop="preparedName" label="制单人" width="140" />
    <el-table-column prop="preparedTime" label="制单时间" width="140" />
    <el-table-column prop="stateName" label="审批人" width="140" />
    <el-table-column prop="stateCode" label="单号" width="140" />
    <el-table-column prop="supplierContacts" label="供应商联系人" width="140" />
  </el-table>
    </div>
</template>

<script setup lang="ts">
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
// 基础信息
const basicInfo = reactive({
 basicordernumber: "",
  typeId: '请选择',
  startTime: "",
  endTime: "",
  inventiryId: '请选择',
  userName: "",
  remarks: "",
})
//添加的操作
const AddStorktaking=()=>{
    console.log(basicInfo);
    axios.post("/write/api/Inventory/AddBices",basicInfo)
    .then(res=>{
        if(res.data.code==200){
            ElMessage.success("添加仓库信息成功");
        }
        else{
            ElMessage.error("添加仓库信息失败");
        }
    })
}
onMounted(()=>{
    getResultOptions();
    getWarehouseOptions();
    Stocktaking();
})
const typeOptions:any = ref([]);      // 盘点类型选项
const getResultOptions = () => {
    axios.get("/reads/api/Inventory/GetType")
        .then(res => {
            typeOptions.value = res.data.data || [];
        })
        .catch(err => {
            console.error("获取盘点结果选项失败：", err);
        });
}
const warehouseOptions = ref([]); // 仓库选项
//仓库的下拉框
const GetInventoryData:any=ref([]);
const Stocktaking=()=>{
    axios.get("/reads/api/Inventory/GetWarehouse")
    .then(res=>{
        GetInventoryData.value=res.data.data||[];
    })
    .catch(err=>{
        console.error("获取仓库信息失败：",err);
    });
}
const getWarehouseOptions = () => {
    axios.get("/reads/api/Inventory/GetWarehouse")
        .then(res => {
            warehouseOptions.value = res.data.data || [];
        })
        .catch(err => {
            console.error("获取仓库选项失败：", err);
        });
}
const tableDataru = ref([]);
onMounted(()=>{
    GetData();
})
const GetData=()=>{
    axios.get("/reads/api/Inventory/GetStocking")
    .then(res=>{
        tableDataru.value=res.data.data;
    })
}

// 主动生成编号
basicInfo.basicordernumber = "STK"+new Date().getTime().toString().substr(10, 4);
const  detailData = ref([]);
const Page =ref({
    PageIndex:1,
    PageSize:10,
    pageCount:0,
    totaCount:0
})
onMounted(()=>{
    GetdetailData();
})
const GetdetailData=()=>{
   axios.get("/reads/api/Inventory/GetInventory",{
       params:{
           PageSize:Page.value.PageSize,
           PageIndex:Page.value.PageIndex,
           
       }
   })
   .then(res=>{
        detailData.value = res.data.pageData;
        Page.value.pageCount = res.data.pageCount;
        Page.value.totaCount = res.data.totaCount;
   })
}
// 盘点单位（演示用）
const unit = ref('box')

// 操作方法（演示用）
const handleEdit = () => {
    console.log('编辑')
}
const handleDelete = () => {
    console.log('删除')
}
</script>

<style scoped>
.inventory-page {
    padding: 20px;
}

.info-card {
    margin-bottom: 20px;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert {
    display: flex;
    gap: 10px;
}

.summary {
    display: flex;
    gap: 20px;
    color: #666;
}

.el-table {
    --el-table-header-text-color: #666;
}
</style>